<template>
  <view class="result-box">
    <view class="icon-box" v-if="isSuccess">
      <image
        src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-success.png"
        class="icon-result"
      ></image>
    </view>
    <view class="icon-box" v-if="!isSuccess">
      <image
        src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-err.png"
        class="icon-result"
      ></image>
    </view>
    <view class="tip">
      {{ isSuccess ? "预订成功" : "预订失败" }}
    </view>
    <view
      class="verify"
      v-if="isSuccess"
      @click="
        toURL('/page_my/bookTickets/detail', { id: id }, { type: 'redirect' })
      "
    >
      查看门票
    </view>
    <view class="verify" @click="getPayOrderInfo(id)" v-else>重新支付</view>
    <view
      class="black"
      v-if="!isSuccess"
      @click="
        toURL('/page_my/bookTickets/detail', { id: id }, { type: 'redirect' })
      "
    >
      查看订单
    </view>
    <view
      class="black"
      v-if="isSuccess"
      @click="toURL(`/pages/index/index`, {}, { type: 'reLaunch' })"
    >
      返回首页
    </view>
  </view>
</template>

<script>
import { payTransactions } from "@/utils";

export default {
  props: {
    state: String,
    id: String | Number,
  },
  data() {
    return {
      isSuccess: this.state == 1,
    };
  },
  methods: {
    // 支付前获取订单详细
    getPayOrderInfo(orderId) {
      if (this.isSubmitting) return;
      this.isSubmitting = true;
      return payTransactions(orderId)
        .then(() => {
          this.isSubmitting = false;
          this.isSuccess = 1;
        })
        .catch(() => {
          this.isSubmitting = false;
        });
    },
  },
};
</script>

<style lang="scss">
.result-box {
  .icon-box {
    width: 160rpx;
    height: 160rpx;
    margin: 98rpx auto 24rpx;
  }

  .icon-result {
    display: block;
    width: 100%;
    height: 100%;
  }

  .tip {
    font-size: 40rpx;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.7);
    line-height: 56rpx;
    text-align: center;
    padding-bottom: 110rpx;
  }

  .verify {
    text-align: center;
    margin: 0 auto 32rpx;
    width: 510rpx;
    height: 88rpx;
    background: #2187ff;
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #ffffff;
    line-height: 88rpx;
  }

  .black {
    text-align: center;
    margin: 0 auto;
    width: 510rpx;
    height: 88rpx;
    background: #f7f9fa;
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.8);
    line-height: 88rpx;
  }
}
</style>
